<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04pcvaluetransfer</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .div1{
            width: 300px;
            height: 240px;
            border: 1px dotted;
            text-align: center;
            background-color: honeydew;
            border-radius: 20px;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app" style="padding-left: 25px;">
        <lessonlist></lessonlist>
    </div>
    <template id="templateItemChild">
        <div class="div1">
            <div style="margin-top: 10px;">
                <img :src="imgchild" alt="" width="270px" height="150px" style="border-radius: 10px;">
            </div>
            <div style="font-size: 20px;font-weight: bold;">{{titlechild}}</div>
            <div style="margin-top:15px;">
                <div style="float:left;margin-left: 15px;width: 140px;font-size: 12px;">{{studynumchild}}人学习|{{commentnumchild}}人评论</div>
                <div style="float:right;margin-right: 15px;">
                    <button style="background-color: green;color: white;" v-if="isfreechild==1">免费</button>
                    <button style="background-color: red;color: white;" v-if="isfreechild==0">付费</button>
                    <button style="background-color: brown;color: white;" @click="appointment">预约课程</button>
                </div>
            </div>
        </div>
    </template>
    <template id="templateListParent">
        <div>
            <div style="background-color: aqua;position: absolute;">{{msg}}</div>
            <lessonitem v-for="lesson in lessons" 
            :imgchild="lesson.imgparent" 
            :titlechild="lesson.titleparent" 
            :studynumchild="lesson.studynumparent" 
            :commentnumchild="lesson.commentnumparent" 
            :isfreechild="lesson.isfreeparent"
            @receive="getVal"></lessonitem>
        </div>
    </template>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'lessonlist':{
                template:'#templateListParent',
                data:function(){
                    return{
                        lessons:[
                            {imgparent:"../images/model1.png",titleparent:"java基础1",studynumparent:1234,commentnumparent:1234,isfreeparent:1},
                            {imgparent:"../images/model2.jpg",titleparent:"java基础2",studynumparent:1231,commentnumparent:1235,isfreeparent:0},
                            {imgparent:"../images/model3.png",titleparent:"java基础3",studynumparent:1232,commentnumparent:1236,isfreeparent:1},
                            {imgparent:"../images/model4.jpg",titleparent:"java基础4",studynumparent:1233,commentnumparent:1237,isfreeparent:0},
                            {imgparent:"../images/model5.jpg",titleparent:"java基础5",studynumparent:1234,commentnumparent:1238,isfreeparent:1},
                            {imgparent:"../images/model6.jpg",titleparent:"java基础6",studynumparent:1235,commentnumparent:1239,isfreeparent:0},
                            {imgparent:"../images/model5.jpg",titleparent:"java基础7",studynumparent:1236,commentnumparent:1235,isfreeparent:1},
                            {imgparent:"../images/model6.jpg",titleparent:"java基础8",studynumparent:1237,commentnumparent:1234,isfreeparent:0}
                        ],
                        msg:""
                    }
                },
                methods: {
                    getVal(obj){
                        var array=obj.split(",");
                        var title=array[0];
                        var studynum=parseInt(array[1]);
                        var message="你已成功预约了"+title+"课程，目前已有"+parseInt(studynum+1)+"人预约";
                        this.msg=message;
                    }
                },
                components:{
                    'lessonitem':{
                        template:'#templateItemChild',
                        props:["imgchild","titlechild","studynumchild","commentnumchild","isfreechild"],
                        methods:{
                            appointment(){
                                var title=this.titlechild;
                                var studynum=this.studynumchild;
                                var content=title+","+studynum;
                                this.$emit('receive',content);
                            }
                        }
                    }
                }
            }
        }
    });
</script>